
<template>
  <div class="bondBox">
    <jy-autocomplete
      popper-class="my-autocomplete"
      v-model="value"
      :fetch-suggestions="querySearch"
      style="width: 190px"
      placeholder="搜索债券"
      @select="handleSearch"
      @change="handleChange"
      size="mini"
      clearable
    >
      <i
        class="Gildata-search1 jy-input__icon"
        slot="suffix"
        @click="handleSearch"
      >
      </i>
      <template slot-scope="{ item }">
        <div class="search-item" :title="item.gilcode + ' ' + item.secuabbr">
          <span class="addr1" v-html="handleStr(item.gilcode, value)"> </span>
          &nbsp;
          <span class="name1" v-html="handleStr(item.secuabbr, value)"> </span>
        </div>
      </template>
    </jy-autocomplete>
  </div>
</template>

<script>
// import { getkeyghost } from "@/utils/api/calculate";
import { getkeyghost } from "@/utils/api-demo/index.js";
import { f9name } from "@/utils/keyghost";
export default {
  components: {},
  props: {
    keyghostype: {
      // type: String,
      default: "5000",
    },
    defaultValue: {},
  },
  watch: {
    defaultValue: {
      handler(val) {
        this.value = val;
      },
      immediate: true,
    },
    value(val) {
      this.$emit("changeValue", val);
    },
  },
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
    };
  },
  methods: {
    handleStr(str, keyword) {
      if (typeof str === "string" && keyword !== "") {
        let res = "/" + keyword + "/g";
        // eslint-disable-next-line no-eval
        str = str.replace(
          eval(res),
          '<a style="color:#FF4D4F">' + keyword + "</a>"
        );
      }
      if (str === "" || !str) {
        str = " -- ";
      }
      return str;
    },
    handleSearch(val) {
      this.value = val.gilcode;
      this.$emit("change", val);
    },
    handleChange() {},
    //匹配模糊搜索
    async querySearch(Keyword, cb) {
      if (!Keyword) return cb([]);
      this.value = Keyword;
      try {
        let keyvalue = this.value ? this.value.toUpperCase() : this.value;
        const response = await getkeyghost({
          key: keyvalue,
          zip: true,
          size: 10,
          type: this.keyghostype,
        });

        const res = response?.data;

        if ((res.code && !res.data) || (!res.code && !res)) return cb([]);
        // const result = res.split(";");
        const result = res?.data.split(";");
        this.options = result
          .map((item) => {
            const source = item.split(",");
            return {
              secuabbr: source[1],
              gilcode: source[3],
              innercode: source[4],
              secucode: source[2],
              type: f9name(source[6], source[7])
                ? f9name(source[6], source[7]).detailname
                : "",
            };
          })
          .filter((item) => item.gilcode);
        // 如果是输入框查询
        if (cb) {
          cb(this.options);
        }
      } catch (error) {
        // this.searchLoading = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bondBox {
  margin-left: -9px;
  /deep/ .jy-input {
    background: var(--c-highlight-block);
    border-radius: 2px;
    border: 1px solid var(--c-border-light);
    .jy-input__inner {
      background: var(--c-highlight-block);
      font-family: "微软雅黑", "pingfang sc", Arial, Helvetica, SimSun,
        "Biaodian Pro Sans GB", "Helvetica Neue", "Hiragino Sans GB",
        "Microsoft YaHei", STHeiti, sans-serif !important;
    }
  }
}
</style>
